<template>
	<view class="">
		<NavBar title="我的洗车卡" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<view class="" v-if="!roleInfo.role==1">
				<view class="row1 m_b_32">
					<view class="row1_row1 flex_both">
						<view class="">
							<text class="f_26_0" style="color: #FDE4A9;">
								用户类型：<text style="color: #ffffff;">普通用户</text>
							</text>
						</view>
						<view class=" flex" @click="showCityPicker">
							<view class="m_r_8" style="max-width: 400rpx;">
								<text class="f_26_0 u-line-1" style="color: #ffffff;">
									{{curAddress}}
								</text>
							</view>
							<view class="">
								<up-icon name="arrow-down-fill" size="14" color="#ffffff"></up-icon>
							</view>
						</view>
					</view>
					<view class="row1_row2">
						<text class="f_26_0" style="color: #FDE4A9;">
							洗车服务
						</text>
					</view>
					<view class="row1_row3 flex_both" v-for="(item,index) in washInfo.car_normal_type_list">
						<view class="">
							<text class="f_26_f">
								{{item.type_name}}
							</text>
						</view>
						<view class="">
							<text class="f_26_f">
								剩余次数：<text class="f_26_0" style="color: #FD6B1C;">{{item.wash_num}}</text> 次
							</text>
						</view>
					</view>
				</view>
				<view class="row2">
					<view class="row2_list">
						<view class="row2_item flex_both m_b_22" v-for="(item,index) in menuList" :key="index"
							@click="onClickMenuItem(item)">
							<view class="flex">
								<view :class="['m_r_12',item.icon.margin,'flex']"
									style="width: 38rpx;justify-content: center;">
									<up-image :show-loading="true" :src="item.icon.url" :width="item.icon.width"
										:height="item.icon.height"></up-image>
								</view>
								<view class="">
									<text class="f_26_0_b">
										{{item.label}}
									</text>
								</view>
							</view>
							<view class="flex">
								<view class="">
									<text class="f_26_0 m_r_16">
										{{item.value}}
									</text>
								</view>
								<view class="" v-if="index!=0">
									<up-image :show-loading="true" src="/static/images/my/arrow_right.png" width="17rpx"
										height="34rpx"></up-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="row1 m_b_32">
					<view class="row1_row1 flex_both">
						<text class="f_26_0" style="color: #FDE4A9;">
							用户类型：<text style="color: #ffffff;">集团用户</text>
						</text>
						<view class=" flex" @click="showCityPicker">
							<view class="m_r_8" style="max-width: 400rpx;">
								<text class="f_26_0 u-line-1" style="color: #ffffff;">
									{{curAddress}}
								</text>
							</view>
							<view class="m_t_6">
								<up-icon name="arrow-down-fill" size="14" color="#ffffff"></up-icon>
							</view>
						</view>
					</view>
					<view class="row1_row2">
						<text class="f_26_0" style="color: #FDE4A9;">
							洗车服务
						</text>
					</view>
					<view class="row1_row3 flex_both">
						<view class="">
							<text class="f_26_f">
								集团车
							</text>
						</view>
						<view class="">
							<text class="f_26_f">
								剩余次数：<text class="f_26_0" style="color: #FD6B1C;">{{washInfo.car_jituan_num}}</text> 次
							</text>
						</view>
					</view>
				</view>
				<view class="row2">
					<view class="row2_list">
						<view class="row2_item flex_both m_b_22" v-for="(item,index) in menuList" :key="index"
							@click="onClickMenuItem(item)">
							<view class="flex">
								<view :class="['m_r_12',item.icon.margin,'flex']"
									style="width: 38rpx;justify-content: center;">
									<up-image :show-loading="true" :src="item.icon.url" :width="item.icon.width"
										:height="item.icon.height"></up-image>
								</view>
								<view class="">
									<text class="f_26_0_b">
										{{item.label}}
									</text>
								</view>
							</view>
							<view class="flex">
								<view class="">
									<text class="f_26_0 m_r_16">
										{{item.value}}
									</text>
								</view>
								<view class="" v-if="index!=0">
									<up-image :show-loading="true" src="/static/images/my/arrow_right.png" width="17rpx"
										height="34rpx"></up-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<up-picker ref="uCityPickerRef" :show="cityPickerShow" :columns="cityArr" keyName="name"
		@change="cityPickerChangeHandler" @cancel="cityPickerShow = false" @confirm="cityPickerConfirm"
		:defaultIndex="defaultIndex" confirmColor="#F76D11"></up-picker>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	import { roleInfoStore } from "@/stores/user";
	import QQMapWX from '@/common/qqmap-wx-jssdk.js'
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const roleInfo = roleInfoStore()
	const goto = (url) => {
		proxy.$gloab.gotoPage(url)
	}
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76}rpx)`
			}
		});
		getUserInfo()
		getChildInfo()
	})
	const userInfo = ref({
		group_name: '普通用户'
	})
	const getUserInfo = async () => {
		let res = await proxy.$http('my.getUserInfo')
		let data = res.data
		userInfo.value = data
		menuList.value[0].value = userInfo.value.contact_mobile
		if (data.parent_id > 0) {
			menuList.value.splice(1, 1)
		}
	}
	const childInfo = ref()
	const getChildInfo = async () => {
		let res = await proxy.$http('my.getChildInfo')
		let data = res.data
		childInfo.value = data
		if (data.length > 0) {
			menuList.value[1].value = childInfo.value[0].mobile
		} else {
			menuList.value[1].value = '无'
		}
	}
	const washInfo = ref({
		car_jituan_num: 0,
		car_jituan_type_list: [],
		car_normal_num: 0,
		car_normal_type_list: []
	})
	const getWashNum = async () => {
		let res = await proxy.$http('my.getWashNum', { user_id: userInfo.value.id, ...positionInfo.value })
		if (res.code == 1) {
			washInfo.value = res.data
		}
	}
	const menuList = ref([
		{
			label: '主账号',
			value: '130XXXX8888',
			icon: {
				url: '/static/images/my/index_menu1.png',
				width: '34rpx',
				height: '26rpx',
				margin: 'm_b_12'
			},
			url: ''
		},
		{
			label: '子账号',
			value: '无',
			icon: {
				url: '/static/images/my/index_menu2.png',
				width: '38rpx',
				height: '28rpx',
				margin: 'm_b_8'
			},
			url: '/pages/my/mySubAccount'
		},
		{
			label: '使用记录',
			value: '',
			icon: {
				url: '/static/images/my/syjl_icon.png',
				width: '30rpx',
				height: '34rpx',
				margin: ''
			},
			url: '/pages/my/useLog'
		},
	])
	const onClickMenuItem = (e) => {
		goto(e.url)
	}
	// 区县相关
	const qqmapsdk = ref(null)
	onReady(() => {
		qqmapsdk.value = new QQMapWX({
			key: proxy.$config.txMapKey
		});
		getLoaction()
	})
	const longitude = ref()
	const latitude = ref()

	const getLoaction = () => {
		uni.getLocation({
			type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
			success: function (res) {
				longitude.value = res.longitude
				latitude.value = res.latitude
				qqmapsdk.value.reverseGeocoder({
					location: {
						latitude: res.latitude,
						longitude: res.longitude
					},
					success: (res2) => {
						console.log(res2);
						// let data = res2.result.address_component
						// curAddress.value = res2.result.formatted_addresses.standard_address
						// console.log(data);
						// getDistrictByCityId(res2)
						// 获取区id
						getNowAreaByName(res2.result)
					},
					fail: (e) => {
						console.log(e, 'eee')
					}
				})

				// 获取附近房屋
			},
			fail: function (e) {
				// uni.setStorageSync('position_info', { code: 2, longitude: 0, latitude: 0 })
				console.log('获取位置信息失败：' + JSON.stringify(e));
			}
		});
	}
	const getNowAreaByName = async (e) => {

		let res = await proxy.$http("common.getNowAreaByName", { area_name: e.address_component.district, city_name: e.address_component.city })
		let data = res.data
		curAddress.value = data.province.name + '-' + data.cityInfo.name + '-' + data.areaInfo.name
		initCity(res.data)
	}
	// 区县相关
	const cityPickerShow = ref(false)
	const uCityPickerRef = ref(null)
	const rawCityData = ref([])
	const cityArr = ref([])
	const curAddress = ref('')
	const defaultIndex = ref([0, 3, 2])
	const positionInfo = ref({
		province_name: '',
		city_name: '',
		area_name: ''

	})
	const initCity = async (e) => {
		try {
			let res = await proxy.$http('common.getAreaAll')
			if (res.code === 1) {
				defaultIndex.value = []
				rawCityData.value = res.data
				positionInfo.value.province_name = e.province.name
				positionInfo.value.city_name = e.cityInfo.name
				positionInfo.value.area_name = e.areaInfo.name
				const provinceList = rawCityData.value.map(item => {
					return { name: item.name, id: item.id }
				})
				let provinceIndex = 0
				provinceList.forEach((v, index) => {
					if (v.id == e.province.id) {
						provinceIndex = index
						defaultIndex.value.push(index)
					}
				})
				const cityList = rawCityData.value[provinceIndex].children.map(item => {
					return { name: item.name, id: item.id }
				})
				let cityIndex = 0
				cityList.forEach((v, index) => {
					if (v.id == e.cityInfo.id) {
						defaultIndex.value.push(index)
						cityIndex = index
					}
				})
				const counties = rawCityData.value[provinceIndex].children[cityIndex].children.map(item => {
					return { name: item.name, id: item.id }
				})
				counties.forEach((v, index) => {
					if (v.id == e.areaInfo.id) {
						defaultIndex.value.push(index)
					}
				})
				console.log(defaultIndex.value);
				cityArr.value.push(provinceList, cityList, counties)
				getWashNum()
			} else {
				throw new Error(res.msg)
			}
		} catch (e) {
			uni.showToast({
				icon: 'none',
				title: e.message
			})
		}
	}
	const showCityPicker = () => {
		cityPickerShow.value = true
	}
	const cityPickerChangeHandler = (e) => {
		const { columnIndex, indexs } = e
		if (columnIndex === 0) {
			uCityPickerRef.value.setColumnValues(1, rawCityData.value[indexs[0]].children);
			uCityPickerRef.value.setColumnValues(2, rawCityData.value[indexs[0]].children[0].children);
		}
		if (columnIndex === 1) {
			uCityPickerRef.value.setColumnValues(2, rawCityData.value[indexs[0]].children[indexs[1]].children);
		}
	}
	const cityPickerConfirm = (e) => {
		const arr = []
		arr.push(e.value[0].name)
		arr.push(e.value[1].name)
		arr.push(e.value[2].name)
		curAddress.value = arr.join('-')
		positionInfo.value.province_name = e.value[0].name
		positionInfo.value.city_name = e.value[1].name
		positionInfo.value.area_name = e.value[2].name
		cityPickerShow.value = false
		getWashNum()
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main {
			.row1 {
				border-radius: 10rpx;
				overflow: hidden;

				.row1_row1 {
					padding: 26rpx 32rpx;
					text-align: center;
					background: #353434;
				}

				.row1_row2 {
					padding: 30rpx 0;
					text-align: center;
					background: #201F1E;
				}

				.row1_row3,
				.row1_row5 {
					padding: 22rpx 32rpx;
					background: #353434;
				}

				.row1_row4 {
					padding: 22rpx 32rpx;
					background: #201F1E;
				}
			}

			.row2 {
				.row2_list {
					.row2_item {
						padding: 22rpx 22rpx;
						background: #FFFFFF;
						box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
						border-radius: 5rpx;
					}
				}
			}
		}

	}
</style>